<template>
  <div v-for="user in userList">
    <van-card
        style="margin: 10px 0px;"
        :desc="user.userProfile"
        :title="`${user.username}(用户ID：${user.id})`"
        :thumb="user.avatarUrl"
    >
      <template #tags>
        <van-space v-for="tag in user.userTags">
          <van-tag style="margin: 10px 5px;" type="success">{{ tag }}</van-tag>
        </van-space>
      </template>
      <template #footer>
        <van-button size="small" type="primary" @click="doChat(user.userAccount)">联系我</van-button>
      </template>
    </van-card>
  </div>
</template>

<script setup lang="ts">
// 获取父组件传递的属性
// const props = withDefaults(defineProps(), []);

import {useRouter} from "vue-router";

const props = defineProps(['userList']);

const router = useRouter();

// 进入聊天界面
const doChat = (chatUserAccount: string) => {
  router.push({
    path: '/chat',
    query: {
      chatUser: chatUserAccount
    }
  })
}
</script>


<style scoped>

</style>